<template>
  <div class="hello">
    <h2>{{ info }}</h2>
    <ul class="gbin1-list">
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  $('.gbin1-list').sortable().bind('sortupdate', function() {
    console.log('执行SSS')
    $('#msg').html('已变换位置').fadeIn(200).delay(1000).fadeOut(200);
  });
  export default {
    name: 'HelloWorld',
    data () {
      return {
        info: this.$store.state.name + this.$store.state.age,
        list: []
      }
    },
    created(){
      this.list = ['jQuery','javascript','HTML5','CSS3'];
      $('.gbin1-list').sortable().bind('sortupdate', function() {
        console.log('执2222')
        $('#msg').html('已变换位置').fadeIn(200).delay(1000).fadeOut(200);
      });
    },
    methods: {
      imgClick(){
        this.$router.push({
          path: '/'
        })
      },
    },
  }
</script>
<style>
  .gbin1-list {
    list-style: none;
    padding:0;
    margin:0;
  }

  .gbin1-list li {
    line-height: 80px;
    float: left;
    width: 80px;
    height: 80px;
    text-align: center;
    border: 1px solid #CCC;
    margin: 10px;
    font-family: arial;
    background: #707070;
    color: #FFF;
    box-shadow: 0px 0px 10px #505050;
    border-radius: 5px;
    padding: 0px;
  }

  #msg{
    font-size:12px;
    font-family: arial;
    background: #303030;
    color: #cccccc;
    padding: 10px;
    display: none;
    width: 370px;
    margin: 10px;
  }
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
